<script lang="ts">
export default {
  name: 'Order'
}
</script>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { OrderStatus } from '@/constants'
import OrderItem from './components/OrderItem.vue'
import { useMemberStore } from '@/store'
import type { OrderListInfo } from '@/types'

// const activeName = ref(OrderStatus[0].name)
const isLoading = ref(true)

const orderListInfo = ref<OrderListInfo>()
const query = reactive({
  orderState: 0,
  page: 1,
  pageSize: 10
})
const memberStore = useMemberStore()
const handleTabClick = (index: number) => {
  query.orderState = OrderStatus[index].value
}
watch(
  query,
  (newVal) => {
    isLoading.value = true
    // 模拟发货：http://pcapi-xiaotuxian-front-devtest.itheima.net/member/order/consignment/:id
    // 缓存状态，防止频繁切换多次请求同一接口，接口响应时间不一导致数据覆盖
    let cacheState = newVal.orderState
    memberStore.getOrderListInfo(newVal).then((res) => {
      if (newVal.orderState === cacheState) {
        orderListInfo.value = res
        isLoading.value = false
      }
    })
  },
  { immediate: true }
)
</script>

<template>
  <div class="member-order">
    <!-- <XtxTabs v-model="activeName" @tab-click="({ index }) => handleTabClick(index)">
      <XtxTabPane
        v-for="item in OrderStatus"
        :key="item.name"
        :name="item.name"
        :label="item.label"
      />
    </XtxTabs> -->
    <XtxTabs :status="OrderStatus" @tab-click="({ index }) => handleTabClick(index)" />
    <div class="order-list">
      <template v-if="isLoading">
        <XtxInfiniteLoad :isLoading="true" />
      </template>
      <template v-if="!isLoading && orderListInfo?.items.length">
        <OrderItem v-for="item in orderListInfo.items" :key="item.id" :order-item="item" />
      </template>
      <template v-if="!isLoading && orderListInfo?.items.length == 0">
        <div class="order-none">
          <img src="@/assets/images/none.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
.order-list {
  padding: 20px;
  background-color: #fff;

  .order-none {
    padding: 50px 0px;
    text-align: center;

    p {
      color: #999;
    }
  }
}
</style>
